import { Input } from 'antd'
import { forwardRef } from 'react'

import styles from './index.module.less'

const { TextArea } = Input

/**
 * @typedef {Object} OtherProps
 * @property {boolean} [showLimit] 是否显示字数提示，默认true，只有指定了maxLength才生效
 */
/**
 * @typedef {import("antd/es/input").TextAreaProps & OtherProps} AekTextAreaProps
 */

/**
 *
 * @param {AekTextAreaProps} props
 * @returns
 */
const AekTextArea = (props, ref) => {
  const { showLimit = true, maxLength = 2000, value, onChange, className, style, ...otherProps } = props
  return (
    <div className={`${styles.aekTextArea} ${className || ''}`} style={style}>
      <TextArea
        ref={ref}
        {...otherProps}
        maxLength={maxLength}
        value={value}
        onChange={e => {
          onChange(e.target.value)
        }}
      />
      {showLimit && maxLength && (
        <div className={styles.showLimit}>
          {value ? String(value).length : 0} / {maxLength}
        </div>
      )}
    </div>
  )
}

export default forwardRef(AekTextArea)
